import IntegrationTable, {
	IntegrationTableProps,
	OperatingItem,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import {
	Button,
	message,
	Popconfirm,
	Space,
	Image,
	Cascader,
	Tag,
	Divider,
	Descriptions,
} from "antd";
import Search from "antd/lib/input/Search";
import { user, classify, remove } from "./service";
import { arrayToObject, getArray } from "phinney-toolkit";
import { DynamicFormItem } from "@/components/DynamicForm";
import axios from "axios";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	// 用户列表
	let userList: any[] = [];
	// 分类列表
	const classifyTypeList = [
		{ label: "大件代扔", value: "big" },
		{ label: "可再生资源回收", value: "common" },
		{ label: "家电回收", value: "appliance" },
		{ label: "书籍捐赠", value: "book" },
		{ label: "打包回收", value: "pack" },
	];

	const orderTypeList = [
		{ label: "用户下单", value: "10" },
		{ label: "管理员分配单", value: "20" },
		{ label: "回收员接单", value: "30" },
		{ label: "回收员准备上门", value: "40" },
		{ label: "回收员重新录入(完成订单) ", value: "50" },
		{ label: "用户确认完成  ", value: "60" },
		{ label: "用户取消订单（已取消） ", value: "-1" },
	];

	// 表格项
	const columns: ProColumns[] = [
		{
			title: "订单编号",
			dataIndex: "orderCode",
			search: false,
		},
		{
			title: "名称",
			dataIndex: "userName",
			search: false,
			render: (_, record: any) => {
				return record.addressDetail.userName;
			},
		},
		{
			title: "用户预约价格",
			dataIndex: "totalMoney",
			search: false,
		},
		{
			title: "回收员录入价格",
			dataIndex: "recTotalMoney",
			search: false,
		},
		{
			title: "回收物",
			dataIndex: "goods",
			search: false,
			render: (_, record: any) => {
				return record.goods.map((item: any) => {
					return (
						<div style={{ marginBottom: 5 }}>
							<Tag color="#108ee9">
								{item.goodsName}-{item.specifications} *{item.num}
							</Tag>
						</div>
					);
				});
			},
		},

		{
			title: "预约时间",
			dataIndex: "reserveData",
			search: false,
		},
		{
			title: "下单时间",
			dataIndex: "orderTime",
			search: false,
		},
		{
			title: "订单类型",
			dataIndex: "orderCategory",
			valueEnum: arrayToObject(classifyTypeList),
		},
		{
			title: "订单状态",
			dataIndex: "orderStatus",
			search: false,
			valueEnum: arrayToObject(orderTypeList),
		},
	];

	// 表单项
	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "upload",
				label: "分类图片",
				name: "classifyIcon",
				fieldProps: {
					limit: 1,
				},
				required: true,
			},
			{
				type: "text",
				label: "分类名称",
				name: "classifyName",
				required: true,
			},
			{
				type: "custom",
				label: "上级分类",
				name: "parentId",
				render: (form: any, record: any) => {
					return (
						<div>
							<Cascader
								defaultValue={[record.parentName] || ""}
								options={vm.state.classsifyList}
								fieldNames={{
									label: "classifyName",
									value: "id",
									children: "list",
								}}
								changeOnSelect
								onChange={(item) => {
									form.setFieldsValue({
										parentId: item[item.length - 1],
									});
								}}
								placeholder="请选择类别~"
							/>
						</div>
					);
				},
			},
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "classifyCode",
		scroll: { x: 1500 },
		columns,
		listProps: {
			url: "/recycler/order/orderPageList",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		handleOperating: (items: any[]) => [
			{
				type: "modal",
				props: {
					btnText: "详情",
					modalProps: {
						width: 1200,
						footer: false,
						title: "详情",
						content: {
							render: (vm: any, getModalRef: any, from: any) => {
								let result = vm.state.record;
								return (
									<div>
										<Descriptions>
											<Descriptions.Item label="手机号">
												{result.addressDetail.phoneNum}
											</Descriptions.Item>
											<Descriptions.Item label="小区地址">
												{result.addressDetail.communityName} -{" "}
												{result.addressDetail.houseNum}
											</Descriptions.Item>
											<Descriptions.Item label="详细地址">
												{result.addressDetail.communityAddress}
											</Descriptions.Item>
											<Descriptions.Item label="图片">
												<Image.PreviewGroup>
													{result.goods.map((items: any) => {
														return (
															<Image src={items.picUrl} width={100} alt="" />
														);
													})}
												</Image.PreviewGroup>
											</Descriptions.Item>
										</Descriptions>
									</div>
								);
							},
						},
					},
				},
			},
			...items,
		],
	};

	// 初始化加载数据
	useEffect(() => {
		// getClassifyList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
